import React, {FC, useContext} from 'react';
import "./JournalNewsList.less";
import HxCyCard from '@/components/HxCyCard';
import HxIcon from "@/components/HxIcon";
import {useRequest} from "ahooks";
import {Empty} from "antd";
import * as API from "@/services";
import {JournalDetailContext} from "@/pages/JournalPage/JournalDetail/commons/JournalDetailContext";
import dayjs from "dayjs";
import {Link} from "@@/exports";
import useNewsAnalyze from "@/pages/NewsPage/commons/useNewsAnalyze";

interface JournalNewsProps {
}

interface JournalNewsItemProps {
  news: API.FrontNews;
}

const JournalNewsItem: FC<JournalNewsItemProps> = (props) => {
  const {news: item} = props;
  const {linkUrl} = useNewsAnalyze(item);
  return (
    <div className={"journal-news-item"}>
      <Link to={linkUrl} className={"journal-news-item-title"} target="_blank">{item.title}</Link>
      <div className={"journal-news-item-date"}>{dayjs(item.openedTime, 'YYYY-MM-DD HH:mm:ss')?.format('YYYY-MM-DD')}</div>
    </div>
  );
};


const JournalNewsList: FC<JournalNewsProps> = (props) => {
  const {journalId} = useContext(JournalDetailContext)

  const dataReq = useRequest(() => API.queryFrontNewss({
    journalId: journalId,
    pageSize: 5
  }), {refreshDeps: [journalId]});

  const data = dataReq.data?.data || [];

  return (
    <div className={"journal-news-container"}>
      <HxCyCard title={"本刊动态"} subtext={"News"} icon={<HxIcon type={"hxicon-tongzhizhongxin"} style={{color: "#1E60C5"}}/>}>
        {
          data.length > 0 ? (
            <div className={"journal-news-list"}>
              {
                data?.map((item) => (
                  <JournalNewsItem key={item.id} news={item}/>
                ))
              }
            </div>
          ) : (
            <div className={"journal-news-list"}>
              <Empty/>
            </div>
          )
        }
      </HxCyCard>
    </div>
  );
};

export default JournalNewsList;
